import { ReactNode } from "react";
import classNames from "classnames";
import styles from "@shared/slide/styles/styles.module.less";
import ReactDOM from "react-dom";
import { useCallback, useEffect, useState, forwardRef, useImperativeHandle } from "react";

interface Props {
  // 弹层内部要渲染的内容
  children: ReactNode;
  // 弹层滑动方向
  direction: "toTop" | "toLeft" | "toRight";
}
interface Props {
    // 弹层内部要渲染的内容
    children: ReactNode;
    // 弹层滑动方向
    direction: "toTop" | "toLeft" | "toRight";
  }
  
  export interface SlideRef {
    // 渲染弹层
    open: () => void;
    // 销毁弹层
    close: () => void;
  }

function Slide({ children, direction }: Props) {
  // 根据 isRender 决定是否渲染弹层
  // 若要测试弹层动画, 手动修改 styles.active 对应的布尔值
  return (
    <div
      className={classNames(styles.layer, {
        [styles.active]: false,
      })}
    >
      <div
        className={classNames(styles.content, {
          [styles.toTop]: direction === "toTop",
          [styles.toLeft]: direction === "toLeft",
          [styles.toRight]: direction === "toRight",
        })}
      >
        {children}
      </div>
    </div>
  );
}

export default Slide;